<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl" style="padding: 22px 0;">{{$route.meta.title}} - {{currentPort}}</div>
      <div class="extra fr">
        <el-alert
          :title="currentAuditStatusTitle"
          :type="currentAuditStatusType"
          show-icon
          :closable="false"
          v-if="true">
        </el-alert>
      </div>
    </div>

    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="rules"
      label-position="top">

      <input type="hidden" v-model="dataForm.id">
      <el-card shadow="never" class="app-container margin-content no-padding">
        <div slot="header">吊装费用明细（包括吊运、托运费用）</div>
        <el-row :gutter="16">
          <el-col :sm="24" :md="8">
            <el-form-item label="20尺集装箱（元）" prop="liftTwenty">
              <el-input placeholder="20尺集装箱（元）" v-model.number="dataForm.liftTwenty" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="40尺集装箱（元）" prop="liftForty">
              <el-input placeholder="40尺集装箱（元）" v-model.number="dataForm.liftForty" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card shadow="never" class="app-container margin-content no-padding">
        <div slot="header">移位费用明细（包括短距离运输、拆箱、装箱费用）</div>
        <el-row :gutter="16">
          <el-col :sm="24" :md="8">
            <el-form-item label="20尺集装箱（元）" prop="moveTwenty">
              <el-input placeholder="20尺集装箱（元）" v-model.number="dataForm.moveTwenty" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="40尺集装箱（元）" prop="moveForty">
              <el-input placeholder="40尺集装箱（元）" v-model.number="dataForm.moveForty" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="箱式货柜车（元）" prop="moveBox">
              <el-input placeholder="箱式货柜车（元）" v-model.number="dataForm.moveBox" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card shadow="never" class="app-container margin-content no-padding">
        <div slot="header">仓储费用明细</div>
        <el-row :gutter="16">
          <el-col :sm="24" :md="8">
            <el-form-item label="20尺集装箱（元）" prop="storageTwenty">
              <el-input placeholder="20尺集装箱（元）" v-model.number="dataForm.storageTwenty" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="40尺集装箱（元）" prop="storageForty">
              <el-input placeholder="40尺集装箱（元）" v-model.number="dataForm.storageForty" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <div class="toolbar clearfix">
      <div class="fl"></div>
      <div class="fr">
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  // api
  import {add, update, getListByUser} from '@/api/costManage'
  import {getPortTree} from '@/api/roles'


  const MAP = {
    'null': {
      text: '未录入数据',
      type: 'info'
    },
    '-1': {
      text: '',
      type: ''
    },
    '0': {
      text: '未审核',
      type: 'warning'
    },
    '1': {
      text: '已审核',
      type: 'success'
    },
    '2': {
      text: '退回',
      type: 'danger'
    }
  }

  export default {
    name: 'costTracking',
    data() {
      return {
        dataForm: {
          id: '',
          portId: '',
          liftTwenty: '',
          liftForty: '',
          moveTwenty: '',
          moveForty: '',
          moveBox: '',
          storageTwenty: '',
          storageForty: ''
        },
        rules: {
          liftTwenty: [
            {required: true, message: '必填項'},
            {type: 'number', message: '必须为数字'}
          ],
          liftForty: [
            {required: true, message: '必填項'},
            {type: 'number', message: '必须为数字'}
          ],
          moveTwenty: [
            {required: true, message: '必填項'},
            {type: 'number', message: '必须为数字'}
          ],
          moveForty: [
            {required: true, message: '必填項'},
            {type: 'number', message: '必须为数字'}
          ],
          moveBox: [
            {required: true, message: '必填項'},
            {type: 'number', message: '必须为数字'}
          ],
          storageTwenty: [
            {required: true, message: '必填項'},
            {type: 'number', message: '必须为数字'}
          ],
          storageForty: [
            {required: true, message: '必填項'},
            {type: 'number', message: '必须为数字'}
          ]
        },
        currentPort: '',
        currentAuditStatusTitle: '',
        currentAuditStatusType: '',
        showFlag: false
      }
    },
    created() {
      this._getListByUser()
    },
    methods: {
      _getListByUser() {
        getListByUser().then((res) => {
          this.$refs['dataForm'].resetFields()
          const {id, portId, liftTwenty, liftForty, moveTwenty, moveForty, moveBox, storageTwenty, storageForty} = res.data.data
          this.currentAuditStatusTitle = MAP[res.data.data.auditStatus].text
          this.currentAuditStatusType = MAP[res.data.data.auditStatus].type
          this.showFlag = true
          this.currentPort = res.data.data.portName
          this.dataForm = {
            id,
            portId,
            liftTwenty,
            liftForty,
            moveTwenty,
            moveForty,
            moveBox,
            storageTwenty,
            storageForty
          }
        })
      },
      submitForm() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              add(this.dataForm).then((res) => {
                this.opCallback()
              })
            } else {
              update(this.dataForm).then((res) => {
                this.opCallback()
              })
            }
          } else {
            return false
          }
        })
      },
      opCallback() {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.$refs['dataForm'].resetFields()
            this.currentPort = ''
            this.currentAuditStatusTitle = ''
            this.currentAuditStatusType = ''
            this.showFlag = false
            this._getListByUser()
          }
        })
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
